<template>
  <div class="gauge-container">
    <p>此处是gauge度量效果，firefox浏览器不支持，请移步chrome浏览器</p>
    <div>
      <a class="gauge gauge-primary" style="--gauge-value:900;--gauge-max-value:1000;"></a>
      <a class="gauge gauge-danger" style="--gauge-value:200;--gauge-max-value:1000;"></a>
      <a class="gauge gauge-success" style="--gauge-value:220;--gauge-max-value:600;"></a>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.getGuageNumber()
  },
  methods: {
    getGuageNumber() {
      var e = document.querySelectorAll('.gauge')
      e.forEach(list => {
        // var that = this
        var values = Number(list.style.getPropertyValue('--gauge-value'))
        var max = Number(list.style.getPropertyValue('--gauge-max-value'))
        var num2 = (values / max) * 100
        var num1 = 100 - num2
        list.style.setProperty('--num1', num1 + '%')
        list.style.setProperty('--num2', num2 + '%')
        list.setAttribute('data-text', values)
        // window.console.log(list)
        // window.console.log(values)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  $blue: rgba(0, 0, 255, 1);
  $bluelight: rgba(0, 0, 255, 0.2);
  $red: red;
  $redlight: rgba(255, 0, 0, 0.2);
  $green: rgba(0, 255, 0, 1);
  $greenlight: rgba(0, 255, 0, 0.2);

  .gauge-container {
    --num1: 0;
    --num2: 100%;
    display: flex;
    height: 150px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    div{
      display: flex;
      justify-content: space-around; // 项目间隔相等
      align-items: center;
      width: 100%;
    }

    .gauge {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 50px;
      text-decoration: none;
      cursor: pointer;

      &::before {
        position: absolute;
        content: attr(data-text);
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        background: #fff;
        display: flex;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
      }
    }

    .gauge-primary {
      background-image: conic-gradient($bluelight 0, $bluelight var(--num1), $blue var(--num1), $blue var(--num2));
      // background-image: conic-gradient(#ccc 0, #ccc 10%, $blue 10%, $blue 90%);
    }

    .gauge-danger {
      background-image: conic-gradient($redlight 0, $redlight var(--num1), $red var(--num1), $red var(--num2));
    }

    .gauge-success {
      background-image: conic-gradient($greenlight 0, $greenlight var(--num1), $green var(--num1), $green var(--num2));
    }
  }
</style>
